<template>
    <div class="line-container" :class="collapsed ? '三' : 'X'">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    collapsed: { type: Boolean, default: false }
})

</script>

<style lang="scss">
.line-container {
    position: relative;
    margin-top: -1.5rem;
    .line {
        width: 2rem;
        height: 4px;
        background-color: var(--n-text-color);
        position: absolute;
        transition: all ease-in-out 0.2s;

        &:nth-child(1) {
            top: 0px;
        }

        &:nth-child(2) {
            top: 10px;
        }

        &:nth-child(3) {
            top: 20px;
        }

    }

    &.X {
        .line:nth-child(1) {
            rotate: 45deg;
            top: 10px;
        }

        .line:nth-child(2) {
            opacity: 0;
        }

        .line:nth-child(3) {
            rotate: -45deg;
            top: 10px;
        }
    }
}
</style>